import { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { useNavigate } from 'react-router'
import { _PAGE_, _ResultImages } from '@/consts/system.ts'

type TState =
  | '403'
  | '404'
  | '500'
  | 'SUCCESS'
  | 'ERROR'
  | 'INFO'
  | 'Loading'
  | 'PAGE NULL'
  | 'LOSE RES'
  | 'DEV'
  | 'RESTORE'
interface IProps {
  children?: ReactNode
  state?: TState
  src?: string
  model?: 'full' | 'auto'
  back?: boolean
}

const Result: FC<IProps> = (props) => {
  const navigate = useNavigate()
  const { state = '404', src = '', model = 'auto', back = true } = props

  return (
    <div
      className={
        'relative  w-full h-full flex items-center justify-center bg-base-plate'
      }
    >
      {back && (
        <div
          className={
            'absolute bottom-10 p-4 font-mono text-primary-600 text-2xl rounded cursor-pointer hover: shadow hover:scale-90 transition duration-100'
          }
          onClick={() => navigate(_PAGE_.def)}
        >
          返回首页
        </div>
      )}

      <img
        className={
          'max-w-full max-h-full bg-no-repeat bg-cover bg-center cursor-pointer'
        }
        src={_ResultImages.base + _ResultImages[state]}
        alt={'...'}
        title={'点击任意位置返回首页'}
        onClick={() => navigate(_PAGE_.def)}
      />
    </div>
  )
}

export default memo(Result)
